import {
    createRouter,
    createWebHashHistory,
    createWebHistory
} from "vue-router"
import Home from "../components/Home.vue"
import TodoMvc from "../components/todos/index.vue"
import About from "../components/About.vue"
import Info from "../components/AboutInfo.vue"
import NotFound from "../components/NotFound.vue"
import tsComponent from "../components/TsComponent.vue"

const router = createRouter({
    // 加上参数后可以在所有路径前增加前缀
    history: createWebHistory(""),
    routes: [{
            path: "/",
            name: "home",
            component: Home
        },
        // 404页面
        {
            path: "/:pathMath(.*)*",
            name: "not-found",
            component: NotFound
        }

    ],
    // 页面跳转页面再返回是，重新回到上次的滚动位置
    scrollBehavior(to, from, position) {
        console.log(position, "页面位置信息");
        if (position) {
            return position;
        } else {
            return {
                top: 0,
                left: 0
            }
        }
    }
})
router.addRoute({
    path: "/todomvc",
    name: "todoMvc",
    component: TodoMvc
})
// 动态添加路由
router.addRoute("home", {
    path: "/about",
    name: "about",
    component: About
})
// 动态添加子路由
router.addRoute("about", {
    path: "/about/info",
    name: "info",
    component: Info
})
router.addRoute("home",{
    path:"/tsComponent",
    name:"tsComponent",
    component:tsComponent
})


// 路由监控
router.beforeEach((to, from, next) => {
    console.log(`前往${to.path},来自于${from.path}`);
    next()
})




export default router